<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>VueUse | 陈梁月</title>
    <meta name="generator" content="VuePress 1.6.0">
    
    <meta name="description" content="状态保存
createGlobalState   简化版pinia   将状态保留在全局范围内，以便在 Vue 实例之间可重用。
createInjectionState     创建可注入到组件中的全局状态
createSharedComposable     使一个可组合的函数可用于多个 Vue 实例。
use ...">
    <link rel="preload" href="/jiraiya-chen-blog/assets/css/0.styles.a76d507b.css" as="style"><link rel="preload" href="/jiraiya-chen-blog/assets/js/app.61a538cd.js" as="script"><link rel="preload" href="/jiraiya-chen-blog/assets/js/6.cdd050e5.js" as="script"><link rel="preload" href="/jiraiya-chen-blog/assets/js/3.c32d983c.js" as="script"><link rel="preload" href="/jiraiya-chen-blog/assets/js/23.460b2cad.js" as="script"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/10.69f07e0e.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/11.53f87820.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/12.ae4be476.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/13.3c5cc435.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/14.7fe16526.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/15.35217ffc.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/16.a0eac610.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/17.82bb9b86.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/18.217868a1.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/19.9bd59858.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/20.654ddc5a.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/21.ca86705f.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/22.82e1511c.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/24.cc206537.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/4.00b7630e.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/5.631f1efc.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/7.7b6ab354.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/8.0b74c858.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/9.ce3d6c06.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/vuejs-paginate.c82c253b.js">
    <link rel="stylesheet" href="/jiraiya-chen-blog/assets/css/0.styles.a76d507b.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><section id="header-wrapper"><header id="header"><div class="header-wrapper"><div class="title"><a href="/jiraiya-chen-blog/" class="nav-link home-link">陈梁月 </a></div> <div class="header-right-wrap"><ul class="nav"><li class="nav-item"><a href="/jiraiya-chen-blog/" class="nav-link">博文</a></li><li class="nav-item"><a href="/jiraiya-chen-blog/tag/" class="nav-link">标签</a></li></ul> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></div></header></section> <div id="mobile-header"><div class="mobile-header-bar"><div class="mobile-header-title"><a href="/jiraiya-chen-blog/" class="nav-link mobile-home-link">陈梁月 </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div> <div class="mobile-menu-wrapper"><hr class="menu-divider"> <ul class="mobile-nav"><li class="mobile-nav-item"><a href="/jiraiya-chen-blog/" class="nav-link">博文</a></li><li class="mobile-nav-item"><a href="/jiraiya-chen-blog/tag/" class="nav-link">标签</a></li> <li class="mobile-nav-item"><!----></li></ul></div></div></div> <div class="content-wrapper"><div id="vuepress-theme-blog__post-layout"><article itemscope="itemscope" itemtype="https://schema.org/BlogPosting" class="vuepress-blog-theme-content"><header><h1 itemprop="name headline" class="post-title">
        VueUse
      </h1> <div class="post-meta"><div itemprop="publisher author" itemtype="http://schema.org/Person" itemscope="itemscope" class="post-meta-author"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-navigation"><polygon points="3 11 22 2 13 21 11 13 3 11"></polygon></svg> <span itemprop="name">Jiraiya</span> <span itemprop="address">   in 苏州</span></div> <div class="post-meta-date"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> <time pubdate itemprop="datePublished" datetime="2023-09-25T00:00:00.000Z">
      2023-09-25
    </time></div> <ul itemprop="keywords" class="post-meta-tags"><li class="post-tag" data-v-42ccfcd5><a href="/jiraiya-chen-blog/tag/Vue" data-v-42ccfcd5><span data-v-42ccfcd5>Vue</span></a></li></ul></div></header> <div itemprop="articleBody" class="content__default"><h3 id="速查"><a href="#速查" class="header-anchor">#</a> 速查</h3> <h4 id="状态保存"><a href="#状态保存" class="header-anchor">#</a> 状态保存</h4> <ol><li>createGlobalState   简化版pinia   <strong>将状态保留在全局范围内，以便在 Vue 实例之间可重用。</strong></li> <li>createInjectionState     <strong>创建可注入到组件中的全局状态</strong></li> <li>createSharedComposable     <strong>使一个可组合的函数可用于多个 Vue 实例。</strong></li> <li>useAsyncState</li></ol> <h4 id="元素操作"><a href="#元素操作" class="header-anchor">#</a> 元素操作</h4> <ol><li>useActiveElement  直接获取点击了哪个dom</li> <li>useDocumentVisibility   <strong>最小化页面或切换选项卡，然后返回</strong></li> <li>useDraggable  推拽dom  <strong>使元素可拖动</strong></li> <li>useDropZone  文件拖到指定位置   <strong>创建可以放置文件的区域</strong></li> <li>useElementBounding  resize框的尺寸大小等  <strong>HTML 元素的反应式边界框</strong></li> <li>useElementSize  获取元素尺寸  <strong>HTML 元素的反应大小。 调整大小观察者 MDN</strong></li> <li>useElementVisibility  页面视口中，元素是否可见  <strong>跟踪视口中元素的可见性</strong></li> <li>useIntersectionObserver   元素滚动监听是否在视口中可见  <strong>检测目标元素的可见性</strong></li> <li>useMouseInElement  监听鼠标在视口的位置  <strong>与元素相关的反应式鼠标位置</strong></li> <li>useMutationObserver   <strong>观察对 DOM 树所做的更改</strong></li> <li>useParentElement   <strong>获取给定元素的父元素</strong></li> <li>useResizeObserver   <strong>报告对元素内容或边框尺寸的更改</strong></li> <li>useWindowFocus   <strong>使用</strong> <code>window.onfocus</code> <strong>和</strong> <code>window.onblur</code> <strong>事件被动跟踪窗口焦点。</strong></li> <li>useWindowScroll  窗口滚动位置  <strong>反应式窗口滚动</strong></li> <li>useWindowSize  直接获取窗口像素  <strong>反应窗口大小</strong></li></ol> <h4 id="浏览器操作"><a href="#浏览器操作" class="header-anchor">#</a> 浏览器操作</h4> <ol><li>useBluetooth  <strong>支持的蓝牙网页接口</strong></li> <li>useBreakpoints</li> <li>useBroadcastChannel    <strong>反应式广播频道接口 .</strong> 多标签通讯，但是域名前缀相同</li> <li>useBrowserLocation    <strong>哈希将被更改</strong>  vue路由的哈希 值会被改变</li> <li>useClipboard  <strong>反应式剪贴板 API</strong></li> <li>useColorMode</li> <li>useCssVar  <strong>操作 CSS 变量</strong></li> <li>useDark   <strong>反应性暗模式</strong></li> <li>useEventListener   <strong>事件侦听器</strong></li> <li>useEyeDropper 取色器 打开一个放大器取色</li> <li>useFavicon  <strong>图标更改</strong>  改变标签页的图标</li> <li>useFileDialog   <strong>轻松打开文件对话框</strong></li> <li>useFileSystemAccess    <strong>使用 FileSystemAccessAPI 创建、读取和写入本地文件</strong>  可以对text文件进行编辑</li> <li>useFullscreen   <strong>全屏</strong></li> <li>useGamepad  <strong>游戏手柄 API</strong></li> <li>useImage   <strong>在浏览器中反应加载图像，您可以等待结果显示它或显示回退。</strong></li> <li>useMediaControls    <code>audio</code> <strong>和</strong> <code>video</code> <strong>元素的反应式媒体控件</strong></li> <li>useMediaQuery   <strong>反应式媒体查询</strong>  js控制，直接返回true false</li> <li>useMemory   <strong>反应式存储器信息。</strong></li> <li>useObjectUrl   <strong>对象的反应式 URL</strong>  文件转url</li> <li>usePerformanceObserver</li> <li>usePermission  <strong>权限 API 工具</strong>  快捷获取权限，麦克风，剪切板等...</li> <li>usePreferredColorScheme     <strong>反应式首选配色方案媒体查询。</strong></li> <li>usePreferredContrast</li> <li>usePreferredDark   <strong>深色主题偏好</strong></li> <li>usePreferredLanguages     <strong>Web 开发人员提供有关用户首选语言的信息</strong></li> <li>usePreferredReducedMotion</li> <li>useScreenOrientation    <strong>用户当前屏幕方向的信息</strong></li> <li>useScreenSafeArea  移动端 安全区设置</li> <li>useScriptTag</li> <li></li></ol></div> <footer><!----> <hr> <!----></footer></article> <div class="sticker vuepress-toc"><div class="vuepress-toc-item vuepress-toc-h3 active"><a href="#速查" title="速查">速查</a></div></div></div></div> <footer class="footer" data-v-fdbf4940><div class="footer-left-wrap" data-v-fdbf4940><ul class="contact" data-v-fdbf4940></ul></div> <div class="footer-right-wrap" data-v-fdbf4940><ul class="copyright" data-v-fdbf4940><li class="copyright-item" data-v-fdbf4940><a href="/jiraiya-chen-blog/2023/09/25/vueuse/.html" class="nav-link" data-v-fdbf4940>Jiraiya Chen © 2023</a></li></ul></div></footer></div><div class="global-ui"></div></div>
    <script src="/jiraiya-chen-blog/assets/js/app.61a538cd.js" defer></script><script src="/jiraiya-chen-blog/assets/js/6.cdd050e5.js" defer></script><script src="/jiraiya-chen-blog/assets/js/3.c32d983c.js" defer></script><script src="/jiraiya-chen-blog/assets/js/23.460b2cad.js" defer></script>
  </body>
</html>
